<script setup lang="ts">
import {onBeforeUnmount, onMounted, ref} from "vue";
import {useRouter} from 'vue-router';
import FixedNav from "@/components/fixedNav/fixedNav.vue";
import Bottom from "@/components/bottom/bottom.vue";
import * as echarts from 'echarts';
import chinaJson from '@/assets/maps/china.json';

const activeNav = ref('2') // 默认选中首页
const activeSubNav = ref('0')

// 定义路由的跳转
const router = useRouter();
const navigateTo = (path: string) => {
  router.push(path);
};
echarts.registerMap('china', chinaJson);

const chartContainer = ref(null);
let chartInstance: echarts.ECharts | null = null;

const provinceInfo = {
  // 直辖市（使用地图数据中的完整名称）
  municipalities: {
    '北京市': '北京',
    '天津市': '天津',
    '上海市': '上海',
    '重庆市': '重庆'
  },
  // 普通省份省会（使用地图数据中的完整省份名称）
  capitals: {
    '河北省': '石家庄',
    '山西省': '太原',
    '辽宁省': '沈阳',
    '吉林省': '长春',
    '黑龙江省': '哈尔滨',
    '江苏省': '南京',
    '浙江省': '杭州',
    '安徽省': '合肥',
    '福建省': '福州',
    '江西省': '南昌',
    '山东省': '济南',
    '河南省': '郑州',
    '湖北省': '武汉',
    '湖南省': '长沙',
    '广东省': '广州',
    '海南省': '海口',
    '四川省': '成都',
    '贵州省': '贵阳',
    '云南省': '昆明',
    '陕西省': '西安',
    '甘肃省': '兰州',
    '青海省': '西宁',
    '台湾省': '台北',
    '广西壮族自治区': '南宁',
    '内蒙古自治区': '呼和浩特',
    '西藏自治区': '拉萨',
    '宁夏回族自治区': '银川',
    '新疆维吾尔自治区': '乌鲁木齐',
    '香港特别行政区': '香港',
    '澳门特别行政区': '澳门'
  }
};

const option = {
  backgroundColor: 'transparent',
  tooltip: {
    trigger: 'item',
    formatter: (params: any) => {
      if (params.seriesType === 'scatter') {
        if (!params.value[2]) {
          return `${params.name}<br>${params.data.address}`;
        }
        if (params.name === '浙江杭州') {
          return `${params.name}<br/> ${params.value[2]}<br>${params.data.address}`;
        } else {
          return ` ${params.value[2]}<br/>${params.name}`;
        }
      }


      if (params.seriesType === 'map') {
        // 特殊处理海南诸岛
        if (params.name === '南海诸岛') { // 根据实际地图数据中的名称调整
          return '海南诸岛';
        }
        // 判断是否为直辖市
        if (provinceInfo.municipalities[params.name]) {
          return provinceInfo.municipalities[params.name];
        }

        // 显示普通省份及省会
        return `${params.name}<br>省会：${provinceInfo.capitals[params.name]}`;
      }

      return params.name;
    },
    textStyle: {fontSize: 16}
  },
  geo: {
    map: 'china',
    roam: false,
    layoutSize: '100%',
    center: [85.155, 35.2741],
    zoom: 1.5,
    label: {show: false},
    itemStyle: {
      areaColor: '#4B3627',
      borderColor: '#D79D3D',
      borderWidth: 1,
      shadowColor: 'rgba(215, 157, 61, 0.8)',
      shadowBlur: 30
    },
    emphasis: {
      itemStyle: {
        areaColor: '#6B4E3D',
        borderWidth: 2
      }
    }
  },
  series: [
    {
      type: 'map',
      map: 'china',
      geoIndex: 0,
      data: [],
      itemStyle: {areaColor: 'transparent'},
      emphasis: {itemStyle: {areaColor: 'transparent'}}
    },
    {
      type: 'scatter',
      coordinateSystem: 'geo',
      symbol: 'circle',
      symbolSize: 9,
      itemStyle: {
        color: '#FF6600',
        borderColor: '#D79D3D',
        borderWidth: 2,
        opacity: 0.8
      },
      emphasis: {
        itemStyle: {
          color: '#FF4500',
          borderColor: '#8B0000',
          opacity: 1,
          scale: 1.2
        }
      },
      data: [
        {
          name: '浙江杭州',
          value: [120.155, 30.2741, '杭州致优知识产权有限公司'],
          address: '浙江省杭州市滨江区慧港科技园',
          itemStyle: {
            color: '#FF0000', borderColor: '#FF0000',
            emphasis: {
              color: '#FF0000',
              borderColor: '#FF0000'
            }
          }
        },
        {
          name: '静安区',
          value: [121.4474, 31.2270, '合作律所'],
          address: '上海市静安区常德路370号'
        },
        {
          name: '朝阳区',
          value: [116.4433, 39.9219, '合作律所'], // [经度, 纬度, 数值]
          address: '北京市朝阳区日坛北街33号'
        },
        {
          name: '深圳',
          value: [114.0596, 22.5429, '合作律所'],
          address: '广东省深圳市福田区福中三路'
        },
        {
          name: '莆田',
          value: [119.0078, 24.9936, '合作律所'],
          address: '福建省莆田市城厢区荔城中大道2169号'
        },
        {name: '宁波市', value: [121.5497, 29.8683, '合作律所'], address: '浙江省宁波市鄞州区宁东路901号'},
        {name: '哈尔滨市', value: [126.642464, 45.756966, '合作律所'], address: '黑龙江省哈尔滨市XX区XX路XX号'},
        {name: '长春市', value: [125.324501, 43.886841, '合作律所'], address: '吉林省长春市XX区XX路XX号'},
        {name: '沈阳市', value: [123.429092, 41.796768, '合作律所'], address: '辽宁省沈阳市XX区XX路XX号'},
        {name: '石家庄市', value: [114.502464, 38.045475, '合作律所'], address: '河北省石家庄市XX区XX路XX号'},
        {name: '兰州市', value: [103.834170, 36.061380, '合作律所'], address: '甘肃省兰州市XX区XX路XX号'},
        {name: '西宁市', value: [101.777820, 36.617290, '合作律所'], address: '青海省西宁市XX区XX路XX号'},
        {name: '西安市', value: [108.948021, 34.263161, '合作律所'], address: '陕西省西安市XX区XX路XX号'},
        {name: '郑州市', value: [113.665413, 34.757977, '合作律所'], address: '河南省郑州市XX区XX路XX号'},
        {name: '济南市', value: [117.000923, 36.675808, '合作律所'], address: '山东省济南市XX区XX路XX号'},
        {name: '青岛市', value: [120.3826, 36.0671, '合作律所'], address: '山东省青岛市市南区香港中路11号'},
        {name: '太原市', value: [112.549248, 37.857014, '合作律所'], address: '山西省太原市XX区XX路XX号'},
        {name: '合肥市', value: [117.283043, 31.861191, '合作律所'], address: '安徽省合肥市XX区XX路XX号'},
        {name: '武汉市', value: [114.298569, 30.584354, '合作律所'], address: '湖北省武汉市XX区XX路XX号'},
        {name: '长沙市', value: [112.982277, 28.19409, '合作律所'], address: '湖南省长沙市XX区XX路XX号'},
        {name: '南京市', value: [118.76741, 32.041546, '合作律所'], address: '江苏省南京市XX区XX路XX号'},
        {name: '苏州市', value: [120.5853, 31.2989, '合作律所'], address: '江苏省苏州市姑苏区三香路998号'},
        {name: '成都市', value: [104.065735, 30.659462, '合作律所'], address: '四川省成都市XX区XX路XX号'},
        {name: '贵阳市', value: [106.713478, 26.578342, '合作律所'], address: '贵州省贵阳市XX区XX路XX号'},
        {name: '昆明市', value: [102.71225, 25.040609, '合作律所'], address: '云南省昆明市XX区XX路XX号'},
        {name: '南昌市', value: [115.892151, 28.676493, '合作律所'], address: '江西省南昌市XX区XX路XX号'},
        {name: '广州市', value: [113.28064, 23.125177, '合作律所'], address: '广东省广州市XX区XX路XX号'},
        {name: '福州市', value: [119.306236, 26.075302, '合作律所'], address: '福建省福州市XX区XX路XX号'},
        {name: '泉州市', value: [118.6757, 24.8741, '合作律所'], address: '福建省泉州市丰泽区海星街100号'},
        {name: '南宁市', value: [108.320007, 22.82402, '合作律所'], address: '广西壮族自治区南宁市XX区XX路XX号'},
      ],
      rippleEffect: {
        brushType: 'stroke',
        scale: 4,
        period: 2
      }
    },
    {
      type: 'custom',
      coordinateSystem: 'geo',
      renderItem: (params, api) => {
        const hangzhouCoord = [120.155, 30.2741]; // 杭州坐标
        const point = api.coord(hangzhouCoord);

        // 气泡框参数
        const bubbleWidth = 210;
        const bubbleHeight = 60;
        const lineLength = 40; // 引导线长度

        // 计算终点坐标（气泡左侧中心）
        const endPoint = [
          point[0] + lineLength,  // 向右延伸
          point[1]                // 保持同一水平线
        ];

        return {
          type: 'group',
          children: [
            // 白色实线引导线
            {
              type: 'line',
              shape: {
                x1: point[0],
                y1: point[1],
                x2: endPoint[0],
                y2: endPoint[1]
              },
              style: {
                stroke: '#FFFFFF',
                lineWidth: 2,
                shadowColor: 'rgba(0,0,0,0.5)',
                shadowBlur: 8
              }
            },
            // 气泡框（左侧对齐引导线）
            {
              type: 'rect',
              shape: {
                x: endPoint[0],
                y: endPoint[1] - bubbleHeight / 2,
                width: bubbleWidth,
                height: bubbleHeight,
                r: 8
              },
              style: {
                fill: 'rgba(255,255,255,0.7)',
                shadowColor: 'rgba(0,0,0,0.3)',
                shadowBlur: 12
              }
            },
            // 气泡文字内容
            {
              type: 'text',
              style: {
                text: [
                  '{a|杭州致优知识产权有限公司}',
                  '{b|浙江省杭州市滨江区慧港科技园}'
                ].join('\n'),
                rich: {
                  a: {
                    fontFamily: 'AlibabaPuHuiTi_2_85_Bold',
                    fill: '#091631',
                    fontSize: 16,
                    lineHeight: 24
                  },
                  b: {
                    fontFamily: 'AlibabaPuHuiTi_2_65_Medium',
                    fill: '#6D6060',
                    fontSize: 14,
                    lineHeight: 20,
                    padding: [4, 0, 0, 0]  // 上右下左间距调整
                  }
                },
                x: endPoint[0] + 10, // 左侧留出20px边距
                y: endPoint[1] - bubbleHeight / 2 + 8,
                fill: '#FFFFFF',
                fontSize: 16,
                align: 'left',
                lineHeight: 24
              }
            }
          ]
        };
      },
      data: [0]
    }
  ],

};

onMounted(() => {
  chartInstance = echarts.init(chartContainer.value!);
  chartInstance.setOption(option);
  window.addEventListener('resize', () => chartInstance?.resize());
});

onBeforeUnmount(() => {
  chartInstance?.dispose();
  window.removeEventListener('resize', () => chartInstance?.resize());
});
</script>

<template>
  <div class="mainContain">
    <fixed-nav v-model:active-nav="activeNav"
               v-model:active-sub-nav="activeSubNav"></fixed-nav>

    <!--  中间内容-->
    <div class="aboutMeSection1">
      <img
          src="@/assets/images/location.png"
          class="section1-image"
          alt="主视觉图"
      >
    </div>

    <div class="section section2">
      <span class="profileChinese">知优简介</span>
      <span class="profile">zhiyou profile</span>
      <span class="profileContent">
            知优云隶属杭州致优知识产权有限公司，是一家以
        <span class="profileContentText1">维权管控</span>
        为核心切入，立志成为集知产确权布局、知产维权管控、知产运营授权、知产管理权为一体的全链路知识产权法商服务平台。知优云以知产保护为核心，整合各类法律服务资源，降低维权管控成本和门槛，为权利人提供覆盖知识产权私力救济、调解救济、司法救济、行政救济、刑事救济的全维解决方案。由此让权利人重视前端确权布局的价值，促使侵权方寻找权利人获取正规授权，优化和净化营收环境，全面促进知识产权服务产业的蓬勃发展。知优云建立知识产权保护业务全流程的信息化管理系统，投入技术研发人工智能化自动检索和侵权分析系统，运用大数据技术为权利人提供多元化知产服务，打破传统知产代理服务的低价值维度，帮助权利人扩大知产授权和权利运用面，真正放大创新价值和保护知识财产，保护营商环境，助力知产强国！
      </span>
      <img src="@/assets/images/arrows.png" class="arrows">
      <img src="@/assets/images/mission.png" class="mission">
      <div ref="chartContainer" class="chart-container"></div>
<!--      <div class="bubbling">-->
<!--        <img src="@/assets/images/locator.png" class="locator">-->
<!--        <span class="companyName">杭州致优知识产权有限公司</span>-->
<!--        <span class="companyAddress">浙江省杭州市滨江区慧港科技园</span>-->
<!--      </div>-->
<!--      <img src="@/assets/images/bubllingPath.png" class="bubllingPath">-->
<!--      <img src="@/assets/images/point.png" class="point">-->
<!--      <span class="provinceCity">浙江杭州</span>-->
      <span class="advantageSpan1">2000+</span>
      <span class="advantageSpan2">签约品牌</span>
      <span class="advantageSpan3">50+</span>
      <span class="advantageSpan4">合作律所</span>
      <span class="advantageSpan5">10亿+</span>
      <span class="advantageSpan6">挽回损失</span>
    </div>
    <div class="section section3">
      <span class="courseChinese">发展历程</span>
      <span class="course">development history</span>
      <div class="line"></div>
      <img src="@/assets/images/arrows.png" class="arrows2" alt="箭头2">
      <div class="courseContain courseContain1">
        <span class="dateSpan dateSpan1">2018-2019</span>
        <span class="courseContainArrows1"> </span>
        <span class="contentSpan1">立志于净化电商市场环境，专注电商维权管控领域。</span>
      </div>
      <div class="courseContain courseContain2">
        <span class="dateSpan dateSpan2">2020-2021</span>
        <span class="courseContainArrows2"> </span>
        <span class="contentSpan2">签约100+家国内外知名品牌，以维权管控业务在行业内树立口碑和生根。</span>
      </div>
      <div class="courseContain courseContain3">
        <span class="dateSpan dateSpan3">2022</span>
        <span class="courseContainArrows3"> </span>
        <span class="contentSpan3">签约国内外知名品牌累计500+，业务量开枝散叶，营业收入增长达到惊人的300%。</span>
      </div>
      <div class="courseContain courseContain4">
        <span class="dateSpan dateSpan4">2023</span>
        <span class="courseContainArrows4"> </span>
        <span class="contentSpan4">明确“全链路知识产权法商服务平台”的发展定位，帮助权利人挽回经济损失以数亿计。</span>
      </div>
      <div class="courseContain courseContain5">
        <span class="dateSpan dateSpan5">2024</span>
        <span class="courseContainArrows5"> </span>
        <span class="contentSpan5">处理链接数量百万级，累计处理涉嫌低价、窜货、侵权、假货销售总额百亿级。</span>
      </div>
    </div>

    <div class="section section7">
      <span class="corporateCultureChinese">企业文化</span>
      <span class="corporateCulture">corporate culture</span>
      <div class="corporateCultureContainer1">
        <span class="corporateCultureTitle corporateCultureTitle1">
          使命
        </span>
        <span class="corporateCultureContent corporateCultureContent1">
          保护知产环境 助力知产强国
        </span>
      </div>
      <div class="corporateCultureContainer2">
        <span class="corporateCultureTitle corporateCultureTitle2">
          愿景
        </span>
        <span class="corporateCultureContent corporateCultureContent2">
          成为中国首选全链路知识产权法商服务平台
        </span>
      </div>
      <div class="corporateCultureContainer3">
        <span class="corporateCultureTitle corporateCultureTitle3">
          价值观
        </span>
        <span class="corporateCultureContent corporateCultureContent3">
          客户第一 服务至上    行有不得 反求诸己
          积极应变 容错创新    此时此刻 舍我其谁
          简单信任 合作共赢    全力以赴 水滴石穿
        </span>
      </div>
    </div>
    <div class="aboutMeSection5">
      <span class="honorChinese">荣誉资质</span>
      <span class="honor">honor</span>
      <div class="honorImgContain">
        <div class="honorImg honorImg1">
          <img src="@/assets/honor/01-1知优.png" alt="资质证书图片1-1" class="img img1_1">
          <img src="@/assets/honor/01-2知优.png" alt="资质证书图片1-2" class="img img1_2">
          <img src="@/assets/honor/01-3知优.png" alt="资质证书图片1-3" class="img img1_3">
        </div>
        <div class="honorImg honorImg2">
          <img src="@/assets/honor/02单牌企业信用等级证书.png" alt="资质证书图片2" class="img img2">
        </div>
        <div class="honorImg honorImg3">
          <img src="@/assets/honor/03单网诚信供应商.png" alt="资质证书图片3" class="img img3">
        </div>
        <div class="honorImg honorImg4">
          <img src="@/assets/honor/04单网招投标信用等级证书.png" alt="资质证书图片4" class="img img4">
        </div>
        <div class="honorImg honorImg5">
          <img src="@/assets/honor/05单网售后服务诚信认证企业.png" alt="资质证书图片5" class="img img5">
        </div>
        <div class="honorImg honorImg6">
          <img src="@/assets/honor/06保密服务资质证书.png" alt="资质证书图片6" class="img img6">
        </div>
        <div class="honorImg honorImg7">
          <img src="@/assets/honor/07软件开发系统集成服务企业资质证书.png" alt="资质证书图片7" class="img img7">
        </div>
        <div class="honorImg honorImg8">
          <img src="@/assets/honor/08单网企业资信等级证书.png" alt="资质证书图片8" class="img img8">
        </div>
        <div class="honorImg honorImg9">
          <img src="@/assets/honor/09单网质量服务诚信单位.png" alt="资质证书图片9" class="img img9">
        </div>
        <div class="honorImg honorImg10">
          <img src="@/assets/honor/10单网诚信经营示范单位.png" alt="资质证书图片10" class="img img10">
        </div>
      </div>
    </div>


    <!--底部内容-->
    <bottom/>
  </div>
</template>

<style scoped>

.chart-container {
  width: 100%;
  height: 930px;
  position: absolute;
  top: 20px;
  /* right: 80px; */
  z-index: 1;
}
.mainContain {
  width: 1920px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  left: -8px; /* 新增向左微调 */
  top: -8px;
  box-sizing: border-box; /* 新增盒模型计算方式 */
  background-color: #101010;
}


.aboutMeSection1 {

  height: 680px;
  width: 100%; /* 确保宽度100% */
  background-image: url('@/assets/bk/aboutMeSection1.png'); /* 替换为实际图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.section1-image {
  position: absolute;
  top: 310px;
  left: 410px;
  width: 1100px;
  /* height: 68px; */
}

.section2 {
  height: 930px;
  background-color: #101010;
  background-size: cover;
  background-position: center;
  background-blend-mode: normal; /* 修改为normal取消混合效果 */
  position: relative;
}


.profileChinese {
  position: absolute;
  top: 70px;
  left: 881px;
  font-family: "AlibabaPuHuiTi_2_85_Bold", sans-serif;
  color: #FFFFFF;
  font-size: 40px;
  line-height: 56px;
  font-weight: bold;
}

.profile {
  position: absolute;
  top: 92px;
  left: 847px;
  font-family: "AlibabaPuHuiTi_2_85_Bold", sans-serif;
  color: rgba(255, 255, 255, 0.2); /* 白色20%透明度 */
  font-size: 30px;
  line-height: 42px;
  font-weight: bold;
}

.profileContent {
  position: absolute;
  width: 716px;
  height: 330px;
  top: 196px;
  left: 360px;
  font-family: "AlibabaPuHuiTi_2_65_Medium", sans-serif;
  color: #FFFFFF;
  font-size: 21.5px;
  line-height: 30px;
  font-weight: normal;
}
.profileChinese,
.profile,
.profileContent {
  position: absolute;
  z-index: 2; /* 文字内容保持更高层级 */
}
.profileContentText1 {
  color: #ff6600;
}

.arrows {
  position: absolute;
  width: 80px;
  height: 24px;
  top: 542px;
  left: 360px;
  filter: brightness(0) invert(1); /* 将图片颜色变为白色 */
}

.mission {
  position: absolute;
  top: 592px;
  left: 360px;
}

.bubbling {
  position: absolute;
  width: 308px;
  height: 100px;
  top: 445px;
  left: 1124px;
  background-color: rgba(255, 255, 255, 0.7); /* 白色70%透明度 */
  border-radius: 16px 16px 0px 16px;
}

.locator {
  position: absolute;
  top: 20px;
  left: 16px;
}


.companyName {
  position: absolute;
  top: 20px;
  left: 44px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #091631;
  font-size: 19px;
  line-height: 28px;
  font-weight: normal;
}

.companyAddress {
  position: absolute;
  top: 53px;
  left: 16px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #6D6060;
  font-size: 19px;
  line-height: 28px;
}

.bubllingPath {
  position: absolute;
  top: 554px;
  left: 1379px;
}

.point {
  position: absolute;
  top: 606px;
  left: 1454px;
}

.provinceCity {
  position: absolute;
  top: 626px;
  left: 1451px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 20px;
  line-height: 28px;
  color: #FFFFFF;
}

.advantageSpan1 {
  position: absolute;
  top: 714px;
  left: 360px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 60px;
  line-height: 84px;
  color: #FFFFFF;
  font-weight: bold;
}

.advantageSpan2 {
  position: absolute;
  top: 800px;
  left: 360px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 28px;
  line-height: 40px;
  color: #FFFFFF;
  /* font-weight: bold; */
}

.advantageSpan3 {
  position: absolute;
  top: 714px;
  left: 576px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 60px;
  line-height: 84px;
  color: #FFFFFF;
  font-weight: bold;
}

.advantageSpan4 {
  position: absolute;
  top: 800px;
  left: 578px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 28px;
  line-height: 40px;
  color: #FFFFFF;
  /* font-weight: bold; */
}

.advantageSpan5 {
  position: absolute;
  top: 714px;
  left: 729px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 60px;
  line-height: 84px;
  color: #FFFFFF;
  font-weight: bold;
}

.advantageSpan6 {
  position: absolute;
  top: 800px;
  left: 729px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 28px;
  line-height: 40px;
  color: #FFFFFF;
  /* font-weight: bold; */
}

.section3 {
  height: 550px;
  position: relative;
}

.courseChinese {
  position: absolute;
  top: 70px;
  left: 881px;
  font-family: "AlibabaPuHuiTi_2_85_Bold", sans-serif;
  color: #FFFFFF;
  font-size: 40px;
  line-height: 56px;
  font-weight: bold;
}

.course {
  position: absolute;
  top: 92px;
  left: 809px;
  font-family: "AlibabaPuHuiTi_2_85_Bold", sans-serif;
  color: rgba(255, 255, 255, 0.2); /* 白色20%透明度 */
  font-size: 30px;
  line-height: 42px;
  font-weight: bold;
}

.arrows2 {
  position: absolute;
  left: 1480px;
  top: 72px;
  filter: brightness(0) invert(1); /* 将图片颜色变为白色 */
}


.line {
  position: absolute;
  top: 260px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #FF6600;
}

.courseContain:hover {
  background: linear-gradient(180deg, rgba(255, 102, 0, 0.2) 0%, rgba(255, 102, 0, 0.04) 100%);
  border: 1px solid #FF6600;
}

.courseContain1 {
  position: absolute;
  top: 175px;
  left: 361px;
  width: 230px;
  height: 280px;
  border-radius: 12px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04));
  border: 1px solid #FFFFFF;
}

.courseContainArrows1 {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid #FF6600;
}

.dateSpan {
  font-family: "AlibabaPuHuiTi_2_115_Black", sans-serif;
  font-weight: bold;
  font-size: 28px;
  line-height: 40px;
  color: #FF6600;
  text-align: center;
  font-style: normal;
  position: absolute;
  top: 18px;

}

.dateSpan1 {
  position: absolute;
  top: 18px;
  left: 110px;
  transform: translateX(-50%);
  font-family: "AlibabaPuHuiTi_2_115_Black", sans-serif;
  font-weight: bold;
  font-size: 28px;
  line-height: 40px;
  color: #FF6600;
  width: 160px;
  text-align: center;
  font-style: normal;
}

.contentSpan1 {
  position: absolute;
  width: 198px;
  height: 150px;
  top: 102px;
  left: 16px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-size: 22px;
  line-height: 30px;
  color: #FFFFFF;
}

.courseContain2 {
  position: absolute;
  top: 175px;
  left: 603px;
  width: 230px;
  height: 280px;
  border-radius: 12px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04));
  border: 1px solid #FFFFFF;
}

.dateSpan2 {
  position: absolute;
  top: 18px;
  left: 110px;
  transform: translateX(-50%);
  font-family: "AlibabaPuHuiTi_2_115_Black", sans-serif;
  font-weight: bold;
  font-size: 28px;
  line-height: 40px;
  color: #FF6600;
  width: 160px;
  text-align: center;
  font-style: normal;
}

.courseContainArrows2 {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid #FF6600;
}

.contentSpan2 {
  position: absolute;
  width: 198px;
  height: 150px;
  top: 102px;
  left: 16px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-size: 22px;
  line-height: 30px;
  color: #FFFFFF;
}


.courseContain3 {
  position: absolute;
  top: 175px;
  left: 845px;
  width: 230px;
  height: 280px;
  border-radius: 12px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04));
  border: 1px solid #FFFFFF;
}

.dateSpan3 {
  position: absolute;
  top: 18px;
  left: 110px;
  transform: translateX(-50%);
  font-family: "AlibabaPuHuiTi_2_115_Black", sans-serif;
  font-weight: bold;
  font-size: 28px;
  line-height: 40px;
  color: #FF6600;
  width: 160px;
  text-align: center;
  font-style: normal;
}

.courseContainArrows3 {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid #FF6600;
}

.contentSpan3 {
  position: absolute;
  width: 198px;
  height: 150px;
  top: 102px;
  left: 16px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-size: 22px;
  line-height: 30px;
  color: #FFFFFF;
}

.courseContain4 {
  position: absolute;
  top: 175px;
  left: 1087px;
  width: 230px;
  height: 280px;
  border-radius: 12px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04));
  border: 1px solid #FFFFFF;
}

.dateSpan4 {
  position: absolute;
  top: 18px;
  left: 110px;
  transform: translateX(-50%);
  font-family: "AlibabaPuHuiTi_2_115_Black", sans-serif;
  font-weight: bold;
  font-size: 28px;
  line-height: 40px;
  color: #FF6600;
  width: 160px;
  text-align: center;
  font-style: normal;
}

.courseContainArrows4 {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid #FF6600;
}

.contentSpan4 {
  position: absolute;
  width: 198px;
  height: 150px;
  top: 102px;
  left: 16px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-size: 22px;
  line-height: 30px;
  color: #FFFFFF;
}

.courseContain5 {
  position: absolute;
  top: 175px;
  left: 1329px;
  width: 230px;
  height: 280px;
  border-radius: 12px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04));
  border: 1px solid #FFFFFF;
}

.dateSpan5 {
  position: absolute;
  top: 18px;
  left: 110px;
  transform: translateX(-50%);
  font-family: "AlibabaPuHuiTi_2_115_Black", sans-serif;
  font-weight: bold;
  font-size: 28px;
  line-height: 40px;
  color: #FF6600;
  width: 160px;
  text-align: center;
  font-style: normal;
}

.courseContainArrows5 {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid #FF6600;
}

.contentSpan5 {
  position: absolute;
  width: 198px;
  height: 150px;
  top: 102px;
  left: 16px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-size: 22px;
  line-height: 30px;
  color: #FFFFFF;
}

.section7 {
  width: 100%;
  height: 432px;
  background-color: #101010;
  background-image: url('@/assets/bk/section7.png'); /* 替换为实际背景图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.corporateCultureChinese {
  position: absolute;
  top: 40px;
  left: 881px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #FFFFFF;
  font-size: 40px;
  line-height: 56px;
  font-weight: bold;
}

.corporateCulture {
  position: absolute;
  top: 62px;
  left: 817px;
  font-family: "Microsoft YaHei", sans-serif;
  color: rgba(255, 255, 255, 0.2); /* 白色20%透明度 */
  font-size: 30px;
  line-height: 42px;
  font-weight: bold;
}

.corporateCultureContainer1 {
  position: absolute;
  width: 588px;
  height: 92px;
  background-image: url('@/assets/images/corporateCultureContainerbk1.png'); /* 替换为实际背景图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  top: 144px; /* 距离父容器顶部距离 */
  left: 360px; /* 距离父容器左边距离 */
}

.corporateCultureContainer2 {
  position: absolute;
  width: 588px;
  height: 92px;
  background-image: url('@/assets/images/corporateCultureContainerbk1.png'); /* 替换为实际背景图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  top: 260px; /* 距离父容器顶部距离 */
  left: 360px; /* 距离父容器左边距离 */
}

.corporateCultureContainer3 {
  position: absolute;
  width: 588px;
  height: 208px;
  background-image: url('@/assets/images/corporateCultureContainerbk2.png'); /* 替换为实际背景图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  top: 144px; /* 距离父容器顶部距离 */
  left: 972px; /* 距离父容器左边距离 */
}

.corporateCultureTitle {
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 32px;
  line-height: 45px;
  color: #FFFFFF;
  font-style: normal;
  font-weight: 400;
}

.corporateCultureTitle1 {
  position: absolute;
  top: 24px;
  left: 24px;
}

.corporateCultureTitle2 {
  position: absolute;
  top: 24px;
  left: 24px;
}

.corporateCultureTitle3 {
  position: absolute;
  top: 82px;
  left: 32px;
}

.corporateCultureContent {
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 22px;
  line-height: 30px;
  color: #FFFFFF;
  font-weight: 200;
}

.corporateCultureContent1, .corporateCultureContent2 {
  position: absolute;
  top: 31px;
  left: 104px;
  width: 452px;
  height: 30px;
}

.corporateCultureContent3 {
  position: absolute;
  top: 26px;
  left: 152px;
  width: 382px;
  height: 156px;
  line-height: 52px;
}

.aboutMeSection5 {
  width: 100%;
  height: 780px;
  position: relative;
}

.honorChinese {
  position: absolute;
  top: 70px;
  left: 881px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #FFFFFF;
  font-size: 40px;
  line-height: 56px;
  font-weight: bold;
}

.honor {
  position: absolute;
  top: 92px;
  left: 916px;
  font-family: "Microsoft YaHei", sans-serif;
  color: rgba(255, 255, 255, 0.2); /* 白色20%透明度 */
  font-size: 30px;
  line-height: 42px;
  font-weight: bold;
}



.honorImgContain {
  position: absolute;
  top: 200px;
  left: 50%; /* 新增水平居中定位 */
  transform: translateX(-50%); /* 新增偏移修正 */
  width: 1200px;
  height: auto; /* 改为自适应高度 */
  display: grid;
  grid-template-rows: 1fr 1fr;

  gap: 17px; /* 缩小整体间隙 */
  column-gap: 0px;

  .honorImg {
    width: 340px;
    /*height: 200px; /* 高度自适应 */
    position: relative;
    display: flex;
    margin: 0 5px;

    .img {
      width: 100%; /* 宽度充满容器 */
      height: auto; /* 高度按比例缩放 */
      display: inline-block;
     
    }
    .img1_1{
      top: 0;
    }
    .img1_2,.img1_3{
      width: 40px;
      position: absolute;

      left: 148px;
    }
    .img1_2{
      top: 80px;
    }
    .img1_3{
      top: 130px;
    }

  }

  .honorImg3,.honorImg4,.honorImg5,.honorImg8,.honorImg9,.honorImg10{
    height: 231px;
    width: auto;

    img{
      height: 200px;
      width: auto;
    }

  }
  /* 行布局-通过伪元素创建行容器 */
  .honorImg:nth-child(-n+5) { grid-row: 1; }  /* 前5个在第一行 */
  .honorImg:nth-child(n+6) { grid-row: 2; }   /* 后5个在第二行 */

  /* 列宽控制 */
  .honorImg:nth-child(1),
  .honorImg:nth-child(2),
  .honorImg:nth-child(6),
  .honorImg:nth-child(7) {
    grid-column: span 2;  /* 宽容器占2列 */
  }

  .honorImg:nth-child(3),
  .honorImg:nth-child(4),
  .honorImg:nth-child(5),
  .honorImg:nth-child(8),
  .honorImg:nth-child(9),
  .honorImg:nth-child(10) {
    grid-column: span 1;  /* 窄容器占1列 */
  }


}


</style>